<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>我的简历</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      background: #eee;
      margin: 20px 0;
      font-size: 15px;
      line-height: 1.6;
     
      font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1.5em;
    }
    p {
      margin: .3em 0;
    }

    h2 {
      margin-top: 0;
    }
    h2,h4,h5{
      margin: 0;
    }
    h5{
      font-size: 16px;
      color: #545454;
    }
  
    h4{
      color: #5c5c5c;
      font-size: 18px;
    }
    ol{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul{
      padding: 20px;
      margin: 0;
    }
    section{
      margin-top: 28px;
    }
    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #666;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    strong {
      font-weight: normal;
    }
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    
  </style>

  <style>
    .bio {
      position: relative;
    }
    .bio h2{
      font-size: 24px;
    }
    .bio p{
      font-size: 16px;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 10px;
    }
    .projects ol{
      margin-top: 20px;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin: 18px 0;
    }
    .projects header span{
      font-size: 14px;
    }
    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }
    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }
   
    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }
  
    .openSource>ul>li {
      margin: 18px 0;
    }
    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }
    .openSource header a{
      font-size: 14px;
    }
    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

  .jobs h4{
    font-size: 16px;
  }
    .jobs header>h5 {
      margin-left: 2em;

    }

    .jobs header>span {
      font-size: 14px;
      margin-left: auto;
    }
    .others ul{
      margin: 18px 0;
    }
    .penSource header span{
      font-size: 14px;
    }

  </style>
<style media="print">
  body {
    margin: 0;
    background-color: white;
  }

  .page2 {
    page-break-before: always;
    margin-top: 30px;
  }
</style>


  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }
      article {
        width: auto;
        height: auto;
      }
      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h4,
      .jobs header >h5,
      .jobs header >span {
        margin: 0;
      }
    }
    .lanycui{
      color:red;
      padding:20px 20px;
    }
    .intro{
      font-size: 16px;

    }
    </style>
  <script src="//at.alicdn.com/t/font_2410094_9rs6lu0dwhl.js"></script>
</head>

<body>
  <article>
    <section class="bio">
      <h2>陈善琼</h2>
      <img src="./images/1.jpg" alt="" width="120" height="140">
      <p>
         25岁 | 前端开发工程师 | 深圳
      </p>
      <p>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg>
        17376035268 | 
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
        lanycsq0411 |
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-email"></use>
        </svg>
        shanqiong118@163.com
       
      </p>
        <p>
          <span><time>2014年</time>~<time>2018年</time></span> | 
          南宁学院  |  计算机科学与技术 | 本科</p>
      </p>
    <section class="skills">
      <h2>技能</h2>
      <div class="wrapper">
        <ul>
          <li>熟练使用HTML5和CSS3，熟悉使用 <strong>Grid</strong> 和 <strong>Flex</strong> 布局，实现应用一站式跨屏（PC端与移动端）开发</li>
          <li>熟练掌握 JavaScript 语言，JS 工具函数封装、继承、 <strong>闭包</strong> 、防抖、节流等代码的编写</li>
          <li>熟练使用 <strong>Vue 全家桶 </strong>、<strong> Vue 生命周期 </strong>，组件通信等相关技术，了解 <strong> Vue3.0 </strong> </li>
          <li>熟悉使用<strong> Axios </strong>进行前后端的数据通信</li>
          <li>熟练使用 ElementUi 、 AntDesignUI 框架</li>
          <li>熟悉前端工程化开发，熟悉<strong> Webpack </strong>打包工具</li>
          <li>能够熟练编写标准前端代码，熟悉<strong> 浏览器兼容 </strong>问题解决方案，提升用户体验</li>
          <li>了解<strong> HTTP 协议 </strong>及浏览器工作原理和前端性能优化策略</li>
          <li>熟练使用 Git 版本控制工具，进行代码管理，实现敏捷开发</li>
          <li>了解<strong> Node.js </strong>，利用其搭建简单的前端接口服务器</li>
          <li>熟练使用 JQuery 库、 Bootstrap 库 ,能够实现网页的动态效果与页面交互</li>
          <li>熟悉<strong> TypeScript </strong>、<strong> ES6 新特性</strong></li>
          <li>熟悉 Less 、<strong> Sass </strong>的 CSS 预处理器，能够实现 CSS 代码优化</li>
        </ul>
      </div>
    </section>
    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li >
          <header>
            <h4>固定资产管理系统</h4>
            <span><time>2019年9月</time>~<time>2020年1月</time></span>
            <span></span>
          </header>
          <p>
            <h5>项目介绍</h5>
            该项目是以资产从 <strong>入库、领用、调拨、盘点到报废</strong> 为主流程，对资产管理提供标准化流程管理。<br/>
            支持多种入库方式，实时追踪资产使用情况，通过简单易用的操作，实现资产的统一管理。<br/>
          </p>
          <p >
            <h5>内容与成果</h5>
            使用 Vue-Cli 搭建项目，配置 Webpack</br>
            根据UI图对页面进行重构；在 <strong>ElementUI</strong> 的基础上对公共组件进行 <strong>封装</strong>，如Table、Dialog等</br>
            运用Vuex对全局数据进行管理，以便组件之间通信</br>
            使用 Vue-Router 路由进行页面的跳转，<strong>配置路由规则</strong></br>
            通过axios和后台进行交互，实现 <strong>懒加载</strong> 、实现登录<strong> 权限认证 </strong>，查看详情。</br>
            负责列表详情代码编写，根据接口去请求数据，把数据返回给前端渲染页面
        </p>
          <p>技术栈: Vue / Vue-Router / ElementUI / Axios / TypeScript / JSX / Scss / Echarts </p>
        </li>
          <li >
            <header>
              <h4>自助机收费项目</h4>
              <span><time>2018年10月</time>~<time>2019年3月</time></span>
              <span></span>
            </header>
            <p>
              <h5>项目介绍</h5>
              基于web的项目,主要用于驾照考场的学员缴费，学员通过身份证号码可在自助机查询欠费情况;</br>
              同时可以进行缴费，也可以查询违法行为。 
            </p>
            <p >
              <h5 class="page2">内容与成果</h5>
              使用 <strong>Div+Css</strong> 实现页面模块的布局,快速搭建网站模板；</br>
              使用 <strong>JQuery</strong> 的 Hide，Show 实现 Tab 选项卡的特效过渡；</br>
              负责新增的功能，在原有功能的基础上添加查询违法功能，编写存储过程调用六合一的数据保存在本地；</br>
              编写查询接口， 通过 <strong>Ajax</strong> 完成对后台的交互，实现查看详情。
            </p>
            <p>技术栈: AJAX / JQuery / JavaScript / CSS / XML </p>
          </li>
          <li>
            <header>
              <h4>栗子记账</h4>
              <span><time>2020年11月</time>~<time>2020年12月</time></span>
              <span>
                <a href="https://github.com/lanycsq/morney">源码私有</a>
                <a href="http://lanycsq.gitee.io/morney-website/#/money">项目预览</a>
              </span>
            </header>
            <p>
              一个基于 <strong>Vue </strong> / <strong> TypeScript</strong> 的移动端单页面应用。<br/>
              项目使用以 Vue CLI 为基础创建项目模版，使用 Less 作 CSS 预处理,<br/>
              通过 <strong>Vue  Router</strong> 实现路由的跳转，通过 Vuex 实现状态管理，并对接口进行了封装。
              源代码几乎完全用 TypeScript 实现,用到了装饰器等语法。<br/>
              实现了包含明细、记账、图表等页面，使用 <strong>Echarts</strong> 可视化工具实现了数据统计等功能。<br/>
              可用于快速记账，编写备注，查看收入和支出详情，可以通过图表先试出自己的消费习惯。
            </p>
            <p>技术栈：Vue / Vue CLI / TypeScript / Vue Router / Vuex / ES6/ Npm / Grid / Less </p>
          </li> 
        <li>
          <header>
            <h4>Lanyc UI</h4>
            <span><time>2021年1月</time>~<time>2021年2月</time></span>
            <span>
              <a href="https://github.com/lanycsq/lanyc-ui">源码链接</a>
              <a href="http://lanycsq.gitee.io/lanyc-ui-website/#/">项目预览</a>
            </span>
          </header>
          <p>
            Lanyc UI 是一款基于 Vue3.0 和  <strong>TypeScript</strong> 的简洁的前端 UI 组件库。<br/>
            该目是参照框架 Ant 设计、元素 UI 、 iView 等 UI 库思路，做的一套基于的简易 UI 组件库，<br/>
            目前已支持 <strong>按钮、输入框、图标、Tab 选项、对话框</strong> 等 UI 组件。吐司、Popover、手风琴等目前正在开发中。<br/>
            这次项目让我对制作框架、测试用例和部署框架的应用有了比较深的印象。
          </p>
          <p>技术栈：Vue3.0 / TypeScript / ES6 / Npm Script /Scss / Rollup</p>
          </li>
       
       
      </ol>
    </section>
    <section class="openSource">
      <h2>开源项目</h2>
      <ol>
        <li>
          <header>
            <h4>会动的哆啦A梦</h4>
            <span>
              <a href="https://gitee.com/lanycsq/doraemon">源码链接</a>
              <a href="http://lanycsq.gitee.io/doraemon/">项目预览</a>
            </span>
          </header>
          <p>这是我在学习 <strong> CSS3 和动画</strong> 时，使用 CSS3 动画制作的一个作品</p>
        </li>
        <li>
          <header>
            <h4>手写的 DOM 库</h4>
            <span>
              <a href="https://github.com/lanycsq/dom-tree/tree">源码链接</a>
            </span>
          </header> 
          <p>实现了元素选择、元素创建、<strong>事件委托</strong>、滑动手势等常见功能，加强了对 JQuery 的理解</p>
        </li>
      </ol>
    </section>
    <section class="jobs">
      <h2>工作经历</h2>
      <ol>
        <li>
          <header>
            <h4>广西鸿果科技有限公司 </h4>
            <h5>开发工程师</h5>
            <span><time>2018年3月</time>~<time>2019年3月</time></span>
          </header>

        </li>
        <li>
          <header>
            <h4>广东橙鹰电子科技有限公司</h4>
            <h5>前端工程师</h5>
            <span><time>2019年4月</time>~<time>2021年1月</time></span>
          </header>
        </li>
      </ol>
    </section>

    <section class="others">
      <h2>其他链接</h2>
      <ol>
        <li>GitHub：<a href="https://github.com/lanycsq">https://github.com/lanycsq</a></li>
        <li>知乎：<a href="https://www.zhihu.com/people/qing-jiao-wo-qiong-ge/posts">https://www.zhihu.com/people/qing-jiao-wo-qiong-ge/posts</a></li>
      </ol>
    </section>

 

  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>
</html>